<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>引出生命周期</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--    绑定style样式需要使用对象格式,又因为样式名和样式值重名,因此可以简写为一个-->
    <h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm=new Vue({
        el:'#root',
        data:{
            a:false,
            opacity:1
        },

        //VM完成模板解析并把初始的真实DOM元素渲染至页面后调用mounted,这个时间点也叫做mounted,在整个vue工作当中只调用一次
        mounted(){
            console.log('mounted',this)
            setInterval(() => {
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        },
    })

        // 写在vue的外面,导致代码,需要写在vue里面
        // setInterval(()=>{
        // vm.opacity -=0.01
        // if(vm.opacity <= 0) vm.opacity = 1
        // },16)
</script>
</html>

